<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="head.jsp" %>
<%@ taglib uri="/WEB-INF/tld/fmt.tld" prefix="fmt" %>
<title>填写乘客信息</title>
<script type="text/javascript" src="script/regval.js"></script>
<style>
<!--
span{padding: 2px;}
p{margin: 0; padding: 0px;}
-->
</style>
</head>
<body>
<div class="title">填写订单</div>
	<div id="person">
	<form action="person_add.shtml" method="post" style="border: 0px;">
		<ul id="erroradd">
		</ul>
		<ul class="radius_border box_form">
			<li class="li_hr"><b>登机人信息</b></li>
			<li><button onclick="addperson();" id="add" type="button">添加登机人</button>
			<button style="display: none" id="edit" onclick="editer(this);" type="button">编辑</button>
			</li>
			<li class="li_hr">
					<table cellpadding="0" style="width: 100%" cellspacing="0" id="person_table">
					</table>
			</li>
			<li style="text-align: center;">
				共<label id="count">0</label>位登机人，总价(含燃油机建) <label class="price">&yen;<em id="total">0</em></label>
			</li>
		</ul>
		<ul class="radius_border box_form">
			<li class="li_hr"><b>联系人信息(<font class="red">*</font>必填)</b></li>
			<li>
				<span>姓名</span>
				<input name="coninfo.linkname" id="username" value="" />
			</li>
			<li>
				<span>手机号码</span>
				<input name="coninfo.telphone" id="telphone" value="" maxlength="11" />
			</li>
		</ul>
		<ul class="radius_border box_form">
			<li>是否需要行程单
				<input type="radio" name="itin" value="1" id="itin_N" checked="checked" /><label for="itin_N">不需要</label>
				<input type="radio" name="itin" value="2" id="itin_Y" /><label for="itin_Y">需要</label>
			</li>
		</ul>
		<ul id="errorMsg">
		</ul>
			<div  align="center" style="text-align: center; height: 36px;">
				<button onclick="tosubmit();" type="button" class="next_button">下一步</button>
			</div><br/>
		</form>
	</div>
	<div id="addForm" style="display: none">
		<ul class="radius_border box_form" id="errperson">
		</ul>
		<ul class="radius_border box_form">
			<li class="li_hr"><h3>新登机人信息(<font class="red">*</font>必填)</h3></li>
			<li><span>姓名:</span>
			<input id="form_person" value="" /><label class="red">*</label>
			</li>
			<li><span>证件类型:</span>
				<select id="cardtype">
					<option value="1">身份证</option>
					<option value="2">护照</option>
					<option value="3">军官证</option>
				</select><label class="red">*</label>
			</li>
			<li class="li_hr"><span>证件号码:</span>
				<input id="cardid" value="" maxlength="20"/><label class="red">*</label>
			</li>
			<li style="text-align: center;"><button type="button" onclick="closeAdd();">返回</button>&nbsp;&nbsp;&nbsp;&nbsp;<button onclick="popInfo();" type="button">确定</button></li><br/>
		</ul>
	</div>
</body>
<script type="text/javascript">
var count=0;
var price = <fmt:formatNumber value="${amount }" pattern="0"/>;
var seat = ${seat>=9?8:seat};
addperson = function(){
	if(count<seat){
		$('#person').hide();
		clearInput();
		$('#addForm').show();
	}else{
		error_show('无法继续添加,舱位不够');
	}
	$('.del').hide();
	$('#edit').text('编辑');
};
popInfo = function(){
	var passenger=$('#form_person').val();
	var cardtype = $('#cardtype option:selected').val();
	var cardid = $('#cardid').val();
	var flag = true;
	if($.trim(passenger)==''){
		$('#errperson').html('<li style="color: #D35714;">请填写乘客姓名</li>').show();
		flag=false;
		return;
	}
	if($.trim(cardid)==''){
		$('#errperson').html('<li style="color: #D35714;">请填写证件号码</li>').show();
		flag=false;return;
	}
	if(parseInt(cardtype)==1){ 
		var val_error = checkIdcard($.trim(cardid));
		if(val_error!='true'){
			$('#errperson').html('<li style="color: #D35714;">'+val_error+'</li>').show();
		return;}
	}
	if(flag==true){
		count++;
		refresh(count);
		var ctdesc ='';
		switch(parseInt(cardtype)){
		case 1:ctdesc='身份证';break;
		case 2:ctdesc='护照';break;
		case 3:ctdesc='军官证';break;
		}
		$('#person_table').append('<tr class="b_bottom"><td onclick="remove(this);" class="del" style="cursor:pointer;">&nbsp;</td><td><p>'+passenger+'<input value="'+passenger+'_'+cardtype+'_'+cardid+'" name="personinfo" type="hidden" /></p><p>'+ctdesc+':&nbsp;'+cardid+'</p></td></tr>');
		closeAdd();}
};
closeAdd = function(){
	$('#addForm').hide();
	if($('#edit').css('display')=='none'){
		$('#edit').show();}
	$('#person').show();
	clearInput();
}
clearInput=function(){
	$('#form_person').val('');
	$('#cardtype').val(1);
	$('#cardid').val('');
	$('#errperson').html('').hide();
	refresh(count);
}
remove=function(obj){
	var flag = confirm('确定删除该登机人?');
	if(flag==true){
	$(obj).parent('tr').remove();
	count--;
	refresh(count);}
}
refresh=function(val){
	if(val<=0){val=0;
		$('#edit').text('编辑').hide();}
	$('#count').html(val);
	$('#total').html(val*price);
}
editer=function(obj){
	if($(obj).text()=='编辑'){
		$('.del').show();
		$(obj).text('完成');
	}else{
		if(count>0){$(obj).text('编辑');}
		$('.del').hide();
	}
}
tosubmit=function(){
	$('#errorMsg').html('').hide();
	if(parseInt($.trim($('#count').text()))==0){
		error_show('登机人不能为空!')
		return ;
	}
	if($.trim($('#username').val())==''){
		error_show('联系人姓名不能为空!')
		return ;
	}
	if(!telphone_reg($.trim($('#telphone').val()))){
	error_show('手机号码格式错误!');
	return;}
	
	$('form:first').submit();
}
error_show=function(msg){
	$('#errorMsg').addClass('radius_border box_form').html('<li style="color: #D35714;">'+msg+'</li>').show();
}
</script>
</html>